<template>
  <div class="selfServiceEdit">
    <!-- 自助服务受理详情弹窗 -->
    <ContentWrap>
      <div class="list">
        <List :column="3" sep=":">
          <ListItem label="联系人" :value="curData.customer"></ListItem>
          <ListItem label="联系电话" :value="curData.customerPhone">
            <div class="justify" style="justify-content: flex-start;">
              <span>{{ curData.customerPhone }}</span>
              <SvgIcon
                icon-class="#dianhuaboda-solid"
                style="height: 1.2em !important;padding-left:5px;position: relative;top:-3px;"
                class-name="call-icon"
                @click="selPhone()"
              ></SvgIcon>
            </div>
          </ListItem>
          <ListItem label="业务类型" :value="getServiceTypeName(curData.type)"></ListItem>
          <ListItem label="地址" :value="curData.address" :span="24"></ListItem>
          <ListItem label="需求描述" :span="24">
            <div class="justify">
              <span>{{ curData.demandDetails }}</span>
              <Button type="primary" @click="openImagePreview">查看图片</Button>
            </div>
          </ListItem>
          <ListItem label="关联工单号" :span="24">
            <el-input v-model="workOrderCode" :disabled="!showBtn" placeholder="请输入关联工单号"></el-input>
          </ListItem>
          <ListItem label="备注" :span="24">
            <el-input
              v-model="handlerRemarks"
              type="textarea"
              :disabled="!showBtn"
              :autosize="{minRows: 4}"
              placeholder="请输入备注"
            ></el-input>
          </ListItem>
          <ListItem v-if="showBtn" :span="24">
            <template v-slot:content>
              <div style="text-align:center;">
                <Button type="primary" @click="handleService">处理完成</Button>
              </div>
            </template>
          </ListItem>
        </List>
      </div>
    </ContentWrap>
    <el-dialog title="请选择要呼叫的号码" :visible.sync="dialogVisible2" :append-to-body="true" width="25%">
      <el-radio-group v-model="wantCallPhone">
        <el-radio v-for="(item,index) in phoneList" :key="index" :label="item">{{ item }}</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeSelPhone">取消</Button>
        <Button type="primary" @click="callPhone">确定</Button>
      </span>
    </el-dialog>
    <ImagePrevew ref="imagePrevew"></ImagePrevew>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import { List, ListItem } from '@/components/List'
import Button from '@/components/Button'
import ImagePrevew from './ImagePrevew'
import { getAppSelfServiceById, putAppSelfService } from '@/api/selfService'
export default {
  name: 'SelfServiceEdit',
  components: {
    List,
    ListItem,
    Button,
    ImagePrevew,
    ContentWrap
    // CallOut
  },
  data() {
    return {
      loading: false,
      curData: {},
      workOrderCode: '',
      handlerRemarks: '',
      dialogVisible2: false,
      phoneList: [],
      wantCallPhone: '',
      createAt: '',
      serviceTypeList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '咨询'
        },
        {
          value: '2',
          label: '投诉'
        },
        {
          value: '3',
          label: '报修'
        }
      ]
    }
  },
  computed: {
    showBtn() {
      return !this.curData.state || this.curData.state.toString() === '0'
    }
  },
  created() {
    this.getData(this.$route.query.id)
  },
  methods: {
    // 处理报修
    handleService() {
      if (!this.workOrderCode) {
        this.$message.error('请输入关联工单！')
        return
      }
      // if (!this.handlerRemarks) {
      //   this.$message.error('请输入备注！')
      //   return
      // }
      const data = {
        workOrderCode: this.workOrderCode,
        handlerRemarks: this.handlerRemarks,
        id: this.curData.id,
        state: 1
      }
      return putAppSelfService(data).then(res => {
        this.$message.success('处理成功！')
        setTimeout(() => {
          this.$closePage()
        }, 1000)
      })
    },
    // 打开弹窗
    getData(id) {
      getAppSelfServiceById(id)
        .then(res => {
          this.curData = res.data
          this.workOrderCode = res.data.workOrderCode || ''
          this.handlerRemarks = res.data.handlerRemarks || ''
          this.createAt = new Date().getTime()
        })
        .catch(() => {
          this.$message.error('获取自助服务详情数据失败！')
        })
    },
    selPhone() {
      this.phoneList = Array.from(new Set(this.curData.customerPhone.split(',')))
      if (this.phoneList.length > 1) {
        this.dialogVisible2 = true
      }
      if (this.phoneList.length === 1) {
        this.wantCallPhone = this.phoneList[0]
        this.callPhone()
      }
    },
    callPhone() {
      if (!this.wantCallPhone) {
        return this.$message.info('请先选择要呼叫的电话号码')
      }
      this.$router.push({
        name: 'CallOut',
        query: {
          createAt: this.createAt,
          callTel: this.wantCallPhone,
          name: this.curData.customer,
          task: true
        }
      })
      this.dialogVisible2 = false
    },
    closeSelPhone() {
      this.wantCallPhone = ''
      this.dialogVisible2 = false
    },
    openImagePreview() {
      if (!this.curData.selfServiceAnnexList) {
        return this.$message.info('没有可查看的图片')
      }
      this.$refs.imagePrevew.openDailog(
        this.curData.selfServiceAnnexList,
        this.curData.annexZipPath
      )
    },
    // 获取服务类型名
    getServiceTypeName(v) {
      if (v === undefined) return ''
      for (const item of this.serviceTypeList) {
        if (item.value === v.toString()) {
          return item.label
        }
      }
      return ''
    }
  }
}
</script>
<style lang='scss' scoped>
.selfServiceEdit {
  // background: #fff;
  // padding: 0 20px;
}
.list{
  padding: 0 10px;
}
.img_child {
  border: 1px solid #999;
  padding: 3px;
  border-radius: 2px;
  box-sizing: border-box;
  height: auto;
  width: 100%;
}
.justify {
  display: flex;
  justify-content: space-between;
  font-size: 14px !important;
  // align-items: center;
  span {
    color: rgba(0, 0, 0, 0.65);
    font-size: 12px;
  }
}
</style>
